import Vue from 'vue';

import { EditorWorker, JsonWorker, monaco } from '@lester/monaco-editor';
import '@lester/monaco-editor/dist/lib/style.css';

// @ts-ignore
self.MonacoEnvironment = {
  getWorker: function (_, label) {
    if (label === 'json') {
      return new JsonWorker()
    }
    return new EditorWorker()
  },
}

/** @type {Vue} */
export const QryApiJsonEditor = Vue.extend({
  name: 'QryApiJsonEditor',
  props: {
    readOnly: { type: Boolean, required: false },
    apiJson: { type: Object, default: () => ({ "$schema": `${location.origin}/apiJson/v2.json`, designConfig: {} }) },
  },
  render(h) {
    return h('div', { class: 'qry-api-json-editor' });
  },
  created() {
    // monaco.languages.registerDefinitionProvider()
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [
        {
          uri: `${location.origin}/apiJson/v2.json`,
          schema: {
            type: 'object',
            description: '查询组件/查询配置/V2',
            properties: {
              queryCode: {
                description: '查询代码(queryCode)',
                type: 'string',
              },
              queryName: {
                title: '查询名称(queryName)',
                type: 'string'
              },
              querySql: {
                title: "SQL脚本(querySql)",
                type: 'string'
              },
              version: {
                title: '版本(version)',
                description: '保留字段',
                type: 'number',
                exclusiveMinimum: 0
              },
              designConfig: {
                type: 'object',
                title: '配置明细',
                properties: {
                  inputParams: {
                    type: 'array',
                    title: "入参列表(inputParams)",
                    items: {
                      type: "object",
                      title: "入参(inputParams[])",
                      properties: {
                        required: {
                          type: 'boolean',
                          title: '入参必传(required)',
                          description: 'true:必传; false:可传(缺省)',
                          default: false,
                          examples: [true, false]
                        },
                        name: {
                          type: 'string',
                          title: '入参名称(name)',
                          description: '$开头为内置变量(开发时, [中转]只有开发时前端可以传入)'
                        },
                        type: {
                          type: 'string',
                          title: '入参类型(type)',
                          description: '用于接口文档说明,以及前端视图一键生成查询组件',
                          default: 'string',
                          examples: ['string', 'number', 'array']
                        },
                        defaultValue: {
                          type: ['string', 'object', 'array'],
                          title: '默认值(defaultValue)',
                          description: '默认值可以为字符串/对象/数组'
                        },
                        debugValue: {
                          type: ['string', 'object', 'array'],
                          title: '调试值(debugValue)',
                          description: '[开发/预览]调试值可以为字符串/对象/数组(不可以用于生产)'
                        }
                      },
                      required: ["name"]
                    }
                  },
                  orders: {
                    type: 'array',
                    description: "内置排序",
                    items: {
                      type: 'object',
                      properties: {
                        whereName: {
                          type: 'string',
                          title: "排序字段(designConfig.orders[].whereName)",
                        },
                        orderType: {
                          type: 'string',
                          title: "排序类型(designConfig.orders[].orderType)",
                          description: "false/0: 否 -> 降序;\ntrue/1: 是 -> 升序",
                          default: 'default',
                          examples: [
                            "default",
                            "pre",
                            "post"
                          ]
                        },
                        asc: {
                          type: ['number', 'boolean'],
                          default: false,
                          title: "是否升序(designConfig.orders[].asc)",
                          description: "default: 缺省排序;\npre: 内置排序;\npost:后置排序",
                          examples: [
                            true, 0, 1
                          ]
                        }
                      }
                    }
                  }
                }
              }
            },
            required: [
              "queryCode"
            ]
          }
        }
      ]
    })

  },
  mounted() {


    const $editor = monaco.editor.create(this.$el, { language: "json", fontSize: 20 });
    this.$watch(() => JSON.stringify(this.apiJson, null, 2), (value) => {
      $editor.setValue(value);
    }, { immediate: true })
  }
})